/*  balises H       Composants\balises_H_sur_2_lignes.html  */


h1,
h2,
h3,
h4,
h5 {
    /* Texte en italique */
    line-height: 1.15;
    /* Réduit l'interligne globale du titre */
    /* Texte en italique */
    font-weight: 700;
}

/* même ligne  */
h1 .subtitle1,
h2 .subtitle1,
h3 .subtitle1,
h4 .subtitle1,
h5 .subtitle1 {
    font-size: 0.7em;
    /* Réduction de 20% */
    font-style: italic;
    /* Texte en italique */
    font-weight: 500;
    /* Moins foncé / plus fin */
    opacity: 0.85;
    /* Adoucit le contraste */
    margin-top: 1px;
    /* Espace minimal avec la 1ère ligne */

    /* Retrait à gauche par défaut (alignement à gauche) */
    padding-left: 1.25rem;
    text-align: left;
}

/* fin même ligne  */

/* 2. Style de la sous-ligne (sous-titre) */
h1 .subtitle,
h2 .subtitle,
h3 .subtitle,
h4 .subtitle,
h5 .subtitle {
    display: block;
    /* Force le passage à la ligne */
    font-size: 0.7em;
    /* Réduction de 20% */
    font-style: italic;
    /* Texte en italique */
    font-weight: 500;
    /* Moins foncé / plus fin */
    opacity: 0.85;
    /* Adoucit le contraste */
    margin-top: 1px;
    /* Espace minimal avec la 1ère ligne */

    /* Retrait à gauche par défaut (alignement à gauche) */
    padding-left: 1.25rem;
    text-align: left;
}

/* 3. Annulation du retrait pour les titres centrés (w3-center) */
.w3-center .subtitle,
h1.w3-center .subtitle,
h2.w3-center .subtitle,
h3.w3-center .subtitle,
h4.w3-center .subtitle,
h5.w3-center .subtitle {
    padding-left: 0;
    /* Supprime le retrait */
    text-align: center;
    /* Force le centrage parfait */
}

/*  / Balises H  **************************     */

/* Composants\Image_2.html   figure images      Style global pour les conteneurs de figures */
.figure-container {
    margin: 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* Rendu d'image responsive */
.figure-container img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease;
}

/* Figure 3 : Légende au survol avec fond blanc */
.hover-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.9);
    color: #311e1e;
    padding: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-align: center;
    font-style: italic;
    font-size: 0.8rem;
}

.figure-container:hover .hover-overlay {
    opacity: 1;
}

/* Modal plein écran personnalisé */
#imgModal {
    padding-top: 40px;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
}

#modalImg {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    margin: auto;
}

/*  / images figure H  **************************     */





/*   listes dl   ul ol           Composants\Liste_dl_3_listes_dl.html       */

/* ===================================================
   1. REGLES COMMUNES (Rapprochement dt / dd)
   =================================================== */
dl h4 {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 700;
    /* Colle le h4 au dd juste en-dessous */
}

/* ===================================================
   VARIANTE 1 : Standard (Retrait + espacement réduit)
   =================================================== */
.dl-standard dt {
    margin-top: 1rem;
    font-weight: 700;
}

.dl-standard dd {
    margin-left: 0;
    margin-top: 2px;
    /*  margin-top: 4px;*/
    padding-left: 1.25rem;
    padding-bottom: 1.25rem;
    color: #444;
    line-height: 1.5;
}

/* ===================================================
   VARIANTE 2 : Sans décoration (Minimaliste)
   =================================================== */
.dl-clean dt {
    margin-top: 1rem;
}

.dl-clean dd {
    margin-left: 0;
    margin-top: 4px;
    padding-left: 1.25rem;
    padding-bottom: 1.25rem;
    border: none !important;
    /* Force la suppression des bordures */
    color: #444;
    line-height: 1.5;
}

/* ===================================================
   VARIANTE 3 : Bordure verticale sur dd (avec retrait)
   =================================================== */
.dl-bordered dt {
    margin-top: 1rem;
}

.dl-bordered dd {
    /* Retrait du dd (et de sa bordure) par rapport au dt */
    margin-left: 1.25rem;

    /* Espace réduit sous le titre h4 */
    margin-top: 2px;

    /* Bordure verticale à gauche (couleur Teal W3CSS) */
    border-left: 3px solid #009688;

    /* Espace entre la bordure et le texte */
    padding-left: 0.75rem;
    padding-bottom: 1rem;

    color: #444;
    line-height: 1.4;
}

/*  Listed ul ol ************************** */

.no-bullet {
    list-style-type: none;
    padding-left: 0;
}

/* Option CSS directe si vous voulez des espaces encore plus réduits */
.w3-ul.w3-compact li {
    padding: 2px 8px;
    /* Réduit l'espace haut/bas à 2px */
}

/*  / Listed ul ol ************************** */


/*  / fin    listes dl   ul ol    *************************    */





/*  list inline liens utiles                Composants\List_inline_liens.html          */

/* ====================================================
       Styles personnalisés pour l'optimisation & l'animation
       ==================================================== */

/* 1. Reset de la liste pour la présentation inline */

/* 1. Reset de la liste pour la présentation inline */
/* 1. Reset et centrage universel du conteneur de liste */
.seo-inline-nav {
    width: 100%;
    /* S'adapte à 100% du parent (w3-col, container, etc.) */
    display: block;
}

.seo-inline-nav ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    /* Centrage du bloc ul si largeur restreinte */
    width: 100%;
    /* Force l'occupation totale du conteneur parent */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* Centrage horizontal des <li> */
    text-align: center;
    /* Centrage du texte si retour à la ligne */
    line-height: 1.5;
    font-size: 0.95rem;
}

/* 2. Style des items <li> */
.seo-inline-nav li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Garantit le centrage interne de chaque li */
    margin-top: 5px;
    margin-bottom: 3px;
}

/* 3. Séparateur Pipe avec espacement */
.seo-inline-nav li:not(:last-child)::after {
    content: "|";
    margin: 0 8px;
    color: #baa9a9;
    user-select: none;
}

/* 4. Formatage du texte et liens */
.seo-inline-nav a {
    position: relative;
    text-decoration: none;
    /* Minuscules garanties 
    text-transform: lowercase;*/
    color: #bbd8ef;
    padding: 2px 4px;
    transition: color 0.3s ease;
}

/* 5. Animation du soulignement centré */
.seo-inline-nav a::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    height: 2px;
    background-color: #96b3de;
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Survol / Focus */
.seo-inline-nav a:hover,
.seo-inline-nav a:focus {
    color: #0d47a1;
    outline: none;
}

.seo-inline-nav a:hover::before,
.seo-inline-nav a:focus::before {
    width: 100%;
    left: 0;
}

/* Liens visités */
.seo-inline-nav a:visited {
    color: #c28bda;
}

.seo-inline-nav a:visited::before {
    background-color: #7b1fa2;
}

/* Responsive mobile */
@media (max-width: 600px) {
    .seo-inline-nav ul {
        font-size: 0.85rem;
    }

    .seo-inline-nav li:not(:last-child)::after {
        margin: 0 5px;
    }
}

/*   /fin  list inline liens utiles                Composants\List_inline_liens.html          */





/*  style de base d'un page include    ****************       Styles personnalisés pour le Header & Footer */
.brand-blue-dark {
    background-color: #0b2545 !important;
}

.brand-blue-main {
    background-color: #134074 !important;
}

.brand-blue-hover:hover {
    background-color: #8da9c4 !important;
    color: #0b2545 !important;
}

/* Animation et design des réseaux sociaux footer */
.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #333;
    color: #fff;
    margin: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-btn.facebook:hover {
    background-color: #1877F2;
    transform: translateY(-3px);
}

.social-btn.instagram:hover {
    background-color: #E4405F;
    transform: translateY(-3px);
}

.social-btn.tiktok:hover {
    background-color: #000000;
    transform: translateY(-3px);
}

.social-btn.google:hover {
    background-color: #EA4335;
    transform: translateY(-3px);
}

.social-btn.youtube:hover {
    background-color: #FF0000;
    transform: translateY(-3px);
}

/* Liste inline SEO footer */
.seo-inline-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    line-height: 1.2;
}

.seo-inline-nav li {
    display: inline-flex;
    align-items: center;
    margin: 2px 0;
}

.seo-inline-nav li:not(:last-child)::after {
    content: "|";
    margin: 0 6px;
    color: #d4b1b1;
}

.seo-inline-nav a {
    text-decoration: none;
    color: #e8ebcb;
    transition: color 0.3s;
}

.seo-inline-nav a:hover {
    color: #e4f09a;
}

/* / FIN     style de base d'un page include    ****************       Styles personnalisés pour le Header & Footer */



/* *******  Accordions bleu     *********************                */

/* Marges du H3 réduites au strict minimum */
h3.acc-title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
}

/* Boutons compacts avec titre et icône sur la même ligne */
.acc-btn {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 !important;
    padding: 4px 10px !important;
    text-align: left;
    cursor: pointer;
    user-select: none;
    border: none;
}

/* Espacement minimal (1px) entre chaque accordéon */
.acc-item {
    margin-bottom: 1px !important;
}

/* Rotation de l'icône de flèche */
.acc-icon {
    transition: transform 0.25s ease;
    margin-left: 8px;
}

.acc-btn.active .acc-icon {
    transform: rotate(180deg);
}

/* Masquage/Affichage du contenu avec transition */
.acc-content {
    display: none;
}

.acc-content.show {
    display: block;
    animation: fadeIn 0.25s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Conteneur pour le spinner de chargement */
.loader-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

/*  / FIN         *******  Accordions bleu     *********************                */